<template>
  <div class="svg">
    <div class="boxBtn">
      <button class="btnDraw" @click="clickDraw('')">开始绘制</button>
      <button class="btnReset" @click="clickReset">重置绘制</button>
      <button class="btnPut" :disabled="stutasDraw === 1" @click="clickPut">
        提交坐标
      </button>
      <button class="btnSet" @click="clickSet">生成坐标</button>
    </div>
    <div class="boxSvg">
      <img ref="img" class="img" src="../assets/OIP2.jpg" alt />
      <div
        id="polygon"
        ref="polygon"
        :class="borderRed ? 'borderRed' : ''"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      polygon: null, // svg实例
      borderRed: true, // 是否显示红框
      stutasDraw: 0, // 绘制的状态 0 重置 1 开始  2 结束
    };
  },
  methods: {
    // 重置绘制
    clickReset() {
      this.borderRed = true;
      if (this.polygon) {
        console.log("重置绘制");
        this.polygon.draw("cancel");
        this.polygon = null;
        this.$refs.polygon.innerHTML = "";
      }
      this.stutasDraw = 0;
    },
    // 生成坐标
    clickSet() {
      console.log("生成坐标");
      let dataTest = "[[3,2],[3,177],[253,3]]";
      let tempData = JSON.parse(dataTest);
      tempData.forEach((item, index) => {
        item[0] = parseInt(item[0] / this.getZoomRatio().scaleX);
        item[1] = parseInt(item[1] / this.getZoomRatio().scaleY);
      });
      this.clickDraw(tempData);
      console.log(tempData);
    },
    // 提交坐标
    clickPut() {
      console.log("提交坐标");
      switch (this.stutasDraw) {
        case 2:
          if (this.polygon) {
            console.log(this.polygon);
            this.polygon._array.value.forEach((item, index) => {
              item[0] = parseInt(item[0] * this.getZoomRatio().scaleX);
              item[1] = parseInt(item[1] * this.getZoomRatio().scaleY);
            });
            console.log(JSON.stringify(this.polygon._array.value));
          }
          break;
        case 1:
          console.log("未结束绘制,无法提交");
          break;
        case 0:
          console.log(null);
          break;
        default:
          break;
      }
    },
    // 开始绘制
    clickDraw(data) {
      console.log("开始绘制");
      this.$nextTick(() => {
        if (this.polygon) {
          this.clickReset();
        }
        this.borderRed = false;
        this.polygon = new SVG("polygon")
          .size("100%", "100%")
          .fill("none")
          .stroke({ width: 1, color: "#f00" })
          .polygon(data);
        if (!data) {
          this.stutasDraw = 1;
          this.polygon.draw();
        } else {
          this.stutasDraw = 2;
        }
        this.polygon.on("drawstart", (e) => {
          console.log("drawstart");
          this.stutasDraw = 1;
          document.addEventListener("keydown", (e) => {
            if (e.keyCode == 13) {
              this.polygon.draw("done");
              this.polygon.off("drawstart");
            }
          });
        });

        this.polygon.on("drawstop", () => {
          // remove listener
          console.log("drawstop");
          this.stutasDraw = 2;
        });
      });
    },
    // 获取缩放比例
    getZoomRatio() {
      let img = this.$refs.img;
      let naturalWidth = parseInt(img.naturalWidth);
      let naturalHeight = parseInt(img.naturalHeight);
      let width = parseInt(img.width);
      let height = parseInt(img.height);
      return {
        scaleX: naturalWidth / width,
        scaleY: naturalHeight / height,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.svg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .boxBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    button {
      margin: 0 5px;
    }
  }
  .boxSvg {
    width: 1000px;
    height: 500px;
    position: relative;
    .img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    #polygon {
      width: 100%;
      height: 100%;
    }
  }
  .borderRed {
    box-shadow: 0 0 0 1px #ff3d3d inset;
  }
}
</style>